{extend name='layout:app'}

{block name='css'}
<link rel="stylesheet" href="__STATIC__/css/dropload.css">
<script src="__STATIC__/js/dropload.js"></script>
<link rel="stylesheet" href="__STATIC__/css/star.css">
{/block}

{block name='content'}
    <div id="app">
        <div class="nav">
            <i class="el-icon-arrow-left icon_left" @click="back"></i>
            <div>我的积分</div>
            <i class="iconfont icon-home icon_right" @click="home"></i>
        </div>
        <div class="enable-star">
            <div class="title">可用积分</div>
            <div class="star-count">{$point}</div>
        </div>

        <div class="star" v-cloak>
            <div class="star-cont">
                <div class="item" v-for="star in starList">
                    <div class="icon"><i class="iconfont icon-star"></i></div>
                    <div class="info">
                        <div class="name">{{star.operate}}</div>
                        <div class="time">{{star.create_time}}</div>
                        <div class="star-count"  ref="starColor">{{star.value}}</div>
                    </div>
                </div>
            </div>
        </div>

    </div>
{/block}
{block name='footer'}{/block}
{block name='js'}
<script>
    var page = 0
    var size = 0
    var that = this

    new Vue({
        el:'#app',
        data: {
            starList: [
                
            ]
        },
        created() {
                that = this
                this.$nextTick(() => {
                    // dropload
                    $('.star').dropload({
                        scrollArea : window,
                        threshold : 50,//提前加载距离
                        autoLoad: true,
                        domUp: [],
                        loadDownFn : function(me){
                            $.ajax({
                                type: 'GET',
                                url: '/index/index/getStar?page='+page,
                                dataType: 'json',
                                success: function(data){
                                    page++;
                                    var arrLen = data.length;
                                    if(arrLen){
                                        for(v of data) {
                                            that.starList.push({operate:v.operate,create_time:v.create_time,value:v.value})
                                        }
                                        setTimeout(() => {
                                            $('.star-count').each(function (i,v) {
                                                if(v.innerText.substr(0,1) === '-') {
                                                    $(v).addClass('star-default')
                                                }else {
                                                    $(v).addClass('star-red')
                                                }
                                            })
                                        },300)
                                        if(arrLen < 10) {
                                            me.lock();
                                            me.noData();
                                            me.resetload();
                                            return false
                                        }
                                    }else{  // 如果没有数据
                                        // 锁定
                                        me.lock();
                                        // 无数据
                                        me.noData();
                                    }
                                    // 为了测试，延迟1秒加载
                                    /*setTimeout(function(){
                                        // 插入数据到页面，放到最后面
                                        // $('.lists').append(result);
                                        // 每次数据插入，必须重置
                                        me.resetload();
                                    },1000);*/
                                    me.resetload();
                                },
                                error: function(xhr, type){
                                    alert('Ajax error!');
                                    // 即使加载出错，也得重置
                                    me.resetload();
                                }
                            });
                        }
                    });
                })
        },
        methods: {
            back() {
                window.history.go(-1)
            },
            home() {
                location.href = '/'
            }
        }
    });

</script>
{/block}